<template>
  <div class="page"> 
      <!-- 头部区域 -->
    <div class="search-header" @click="searchShow.show = true">
      <div class="back" @click="goback()"></div>
      <div class="search">请输入宝贝名称</div>
    </div>
    <!-- 左侧区域 -->
    <div class="goods-main">
        <!-- 左侧内容 -->
        <div ref="scroll-classify" class="classify-wrap">
            <!-- 一个坑啊，这个地方一定要用div包裹起来，否则iscroll滚动不生效 
                原因：里面的div高大于外面的div高才能滑动
            -->
            <div>
                <!-- 此时接口中没有active的数据，那么只能自己创造 在getClassify中循环res.data中创造,之后创建一个方法，不过这个方法
                    需要在vuex中执行，去获取每一个下标，那就需要在vuex中重新执行
                -->
                <div ref="item" :class="{'classify-item':true,active:item.active}" v-for="(item,index) in classifys" :key="index" 
                @click="replacePage('/goods/classify/item?cid='+item.cid,index)">{{ item.title }}</div>
            </div>
        </div>
        <!-- 右侧区域 -->
        <div class="goods-content">   
            <router-view></router-view>
        </div>
    </div>
    <my-search :show="searchShow"></my-search>
  </div>
</template>

<script>
/*
    使用scroll解决内容溢出滚动卡顿的问题，需要引入这个插件，之后引入，在之后通过ref来获取
*/
import IScroll from '../../../assets/js/libs/iscroll';
import {mapActions,mapState,mapMutations} from 'vuex'
import MySearch from '../../../components/search/index'
export default {
    data () {
        return {
            searchShow:{show:false} 
        }
    },
    components:{
        MySearch
    },
    methods:{
        ...mapActions({
            getClassify:"goods/getClassify"
        }),
        ...mapMutations({
            SELECT_ITEM:"goods/SELECT_ITEM"
        }), 
        goback(){
            this.$router.go(-1)
        },
        scrollPreventDefault(e) {
            e.preventDefault();
        },
        selectItem(index) {
            /*
               offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
               offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
               clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
               clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
               style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
               style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
               scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
               scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
            */
            let topHeight = this.$refs['item'][0].offsetHeight*index;
            let halfHeight = parseInt(this.$refs['scroll-classify'].offsetHeight/3);
            let bottomHeight = parseInt(this.$refs['scroll-classify'].scrollHeight - topHeight);
            if (topHeight > halfHeight && bottomHeight > this.$refs['scroll-classify'].offsetHeight) {
                this.myScroll.scrollTo(0,-300,1000,IScroll.utils.ease.elastic);
            }
            this.SELECT_ITEM({index:index})
        },
        replacePage (url,index) {
            this.$router.replace(url);
            this.selectItem(index)
        }
    },
    computed:{
        ...mapState({
            classifys:(state)=>state.goods.classifys
        })
    },
    created () {
        //this.$route.query的使用 1.传参数 2、获取参数this.$route.query.shopid
        //要做一下判断，否则如果cid去掉得话，会出现undefined
        this.cid = this.$route.query.cid ? this.$route.query.cid:"";
        /*
        此时出现一个问题：就是无法进行滚动了，问题还是一样：因为异步操作的问题产生，所以需要通过回调函数来进行解决
        */
        this.getClassify({success:()=>{
            //refresh会重新计算一次,但是会出现一个问题，就是需要重新获取DOM，也就是要包裹在this.$nextTick()方法
            this.$nextTick(()=>{
                this.myScroll.refresh();
                //为什么需要写在这里，如果写在外面得话，执行获取不到，原因还是一样，异步操作所影响得
                // console.log(this.classifys);
                if (this.classifys.length > 0 && this.cid) {
                    let index = 0;
                    for (let i = 0;i < this.classifys.length; i++) {
                        if(this.classifys[i].cid === this.cid){
                            index = i;
                            break;
                        }
                    }
                    this.selectItem(index);
                }else{
                    this.selectItem(0);
                }
            })
        }});
    },
    mounted(){
        //获取路由中的meta值
        document.title = this.$route.meta.title;
        this.$refs['scroll-classify'].addEventListener("touchmove",this.scrollPreventDefault);
            this.myScroll = new IScroll(this.$refs['scroll-classify'], {
                scrollX : false,
                scrollY : true,
                preventDefault : false
        });
    },
    /*
    离开页面的时候进行销毁
    为什么要用beforeDestroy，而不是destoryed呢，因为在vue源码中，在执行的过程中，刚开始的时候beforeDestroy的操作没有被销毁
    所以能获取到DOM，而destoryed在执行的过程中被销毁了，获取的是nudefined
    */
    beforeDestroy(){
        this.$refs['scroll-classify'].removeEventListener("touchmove",this.scrollPreventDefault);
    }
};  
</script>

<style scoped>
     .page{width:100%;height:100vh;overflow:hidden;}
    .search-header{width:100%;height:1rem;background:#FFFFFF;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;border-bottom: 1px solid #EFEFEF;}
    .search-header .back{width:0.8rem;height:0.8rem;background-image: url("../../../assets/images/home/goods/back.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
    .search-header .search{width:80%;height:0.69rem;border:solid 1px #B2B2B2;border-radius: 0.1rem;font-size:0.28rem;color:#626262;line-height:0.69rem;padding-left:0.2rem;}

    .goods-main{width:100%;height:92.5vh;display:flex;display:-webkit-flex;}
    .goods-main .classify-wrap{width:1.72rem;height:100%;overflow:hidden;margin-right:3%;position:relative;z-index:1;}
    .goods-main .classify-wrap .classify-item{width:100%;height:0.8rem;border-bottom: 1px solid #EFEFEF;background-color:#FFFFFF;font-size:0.28rem;text-align: center;line-height:0.8rem;overflow:hidden;}
    .goods-main .classify-wrap .classify-item.active{color:#ff0000}
    .goods-main .goods-content{width:71%;height:100%;}
</style>